<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        #video-content {
            position: relative;
            text-align: center;
        }

        #canvas {
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="container">
        <div id="video-content">
            <canvas id="canvas">
                您的浏览器不支持canvas,请升级浏览器
            </canvas>
            <video
                src="https://vd3.bdstatic.com/mda-kminxzeam3iiy800/sc/cae_h264_clips/1608437168/mda-kminxzeam3iiy800.mp4?auth_key=1614149956-0-0-5edf30eca5a80a672dceb12390a2acf1&bcevod_channel=searchbox_feed&pd=1&pt=3&abtest=8_1"
                width="500px" height="300px" 
                id="video"
                controls>
            </video>
            <div>
                <input type="text" id="text" style="vertical-align: middle;"> <button id="submit-btn">发送</button>
                <input type="color" value="#DAA520"  id="color" >
                <input type="range" value="20" id="range" min="20" max="40">
            </div>
        </div>
    </div>

    <script src="./canvas.js"></script>
    
</body>


</html>